<template>
  <a-drawer
      title="修改记录"
      placement="right"
      :closable="true"
      :visible="visible"
      @close="onClose"
      width="460"
  >
    <div class="select-view">
      <a-select placeholder="全部类型" class="select-mod" v-model:value="typeValue" allowClear @change="getListData">
        <a-select-option v-for="item in typeList" :key="item.id" :value="item.value">{{item.label}}</a-select-option>
      </a-select>
      <a-select v-if="props.dataType==='UNIVERSITY'" placeholder="全部高校" class="select-mod" v-model:value="universityValue" show-search allowClear @change="getListData">
        <a-select-option v-for="item in universityList" :key="item.id" :value="item.universityName">{{ item.universityName }}</a-select-option>
      </a-select>
      <a-cascader v-if="props.dataType==='APPLICATION_TYPE'" placeholder="分校-科目-年级" v-model:value="treeValue" :options="treeData" @change="getListData"/>
    </div>
    <div class="main-view" v-if="recordList.length>0" v-loading="statusLoading">
      <div class="record-item" v-for="item in recordList" :key="item.id">
        <div class="record-item-top">
          <div class="flex-ali">
            <span class="record-item-t1">{{ item.operator }}</span>
            <span class="record-item-t2">修改{{ item.type }}</span>
          </div>
          <div class="flex-ali">
            <img class="date-icon" src="@/assets/images/dataCentre/UniversityData/Frame.png" alt="">
            <span class="record-item-t3">{{ item.createTime }}</span>
          </div>
        </div>
        <div class="record-item-con">
          <span class="record-item-t1">{{ item.oldType }}</span>
          <span class="record-item-t4">{{ item.oldResource }}</span>
          <span class="record-item-t1"> 更换为 </span>
          <span class="record-item-t1">{{ item.newResource }}</span>
        </div>
      </div>
    </div>
    <div class="empty-view" v-else>
      <a-empty/>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue"
import { selectResumesLogList,selectCommonConfigDetail,selectUniversityDetail } from "@/api/data-center/university-data.ts"
import { selectCommonConfigFoChildren } from "@/api/application-details/index.ts";

const props = defineProps({
  dataType:{
    type:String,
    default:"UNIVERSITY" // APPLICATION_TYPE(招聘目标的全部类型);UNIVERSITY(高校数据的全部类型)
  },
})

onMounted(()=>{
  getTypeList()
  if(props.dataType==="UNIVERSITY"){
    getUniversityList()
  }else if(props.dataType==="APPLICATION_TYPE"){
    getTreeData()
  }
  getListData()
})

// 数据加载状态
const statusLoading = ref(false)
// 分校-科目-年级树数据
const treeData = ref([])
// 分校-科目-年级绑定值
const treeValue = ref(null)

/**
 * 获取分校-科目-年级树数据
 */
const getTreeData = async ()=>{
  const res = await selectCommonConfigFoChildren({ type: 1 })
  if(res){
    treeData.value = res.data
  }
}

// 高校下拉列表
const universityList = ref([])
// 高校绑定值
const universityValue = ref(null)

/**
 * 获取高校下拉列表
 */
const getUniversityList = async ()=>{
  const res = await selectUniversityDetail()
  if(res){
    universityList.value = res
  }
}

// 类型下拉列表
const typeList = ref([]);
// 类型绑定值
const typeValue = ref(null);

/**
 * 获取类型列表
 */
const getTypeList = async ()=>{
  const params = {
    type:props.dataType
  }
  const res = await selectCommonConfigDetail(params)
  if(res){
    typeList.value = res
  }
}

// 记录数据列表
const recordList = ref([])

/**
 * 处理分校-科目-年级树形结构选中的数据
 */
const handleTreeValue = ()=>{
  if(!treeValue.value){
    return ""
  }
  return `${treeValue.value[0]}-${treeValue.value[1]}-${treeValue.value[2]}`
}

/**
 * 获取记录数据列表
 */
const getListData = async ()=>{
  const params = {
    logType:props.dataType==="UNIVERSITY"?4:5,
    searchType:typeValue.value,
    allScope:props.dataType==="UNIVERSITY"?universityValue.value:handleTreeValue()
  }
  statusLoading.value = true
  const res = await selectResumesLogList(params)
  statusLoading.value = false
  if(res){
    recordList.value = res
  }
}

// 弹窗显示状态
const visible  = ref(false)

/**
 * 弹窗关闭事件
 */
const onClose = () => {
  visible.value = false
};

/**
 * 弹窗打开事件
 */
const open = ()=>{
  visible.value = true
  getListData()
}

defineExpose({open})
</script>

<style scoped lang="less">
.select-view{
  height: 34px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .select-mod{
    width: 203px;
  }
}
.flex-ali{
  display: flex;
  align-items: center;
}
.empty-view{
  height: calc(100% - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-view{
  height: calc(100% - 48px);
  overflow-y: auto;
  .record-item{
    background-color: #F5F7FB;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 14px;
    .record-item-con{
      margin-top: 12px;
    }
    .record-item-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .date-icon{
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
    .record-item-t1{
      font-size: 14px;
    }
    .record-item-t2{
      font-size: 16px;
      font-weight: 500;
      margin-left: 8px;
    }
    .record-item-t3{
      font-size: 14px;
      color: #ABBACD;
    }
    .record-item-t4{
      color: #ABBACD;
      position: relative;
      border-bottom: 1px solid #ABBACD;
      line-height: 2px;
      display: inline-block;
      margin-left: 8px;
    }
  }
}
</style>